<template>
  <div class="data-number">
    <span class="label">{{ options.label }}</span>
    <span class="number">{{ data }}</span>
    <span class="suffix">{{ options.suffix }}</span>
  </div>
</template>

<script setup lang="ts">
import { PropType } from "vue";
import { Position, DataNumberOptionsType } from "./DataNumber.d";

defineProps({
  data: {
    type: [String, Number],
    default: "--",
    validaor(value: string) {
      if (value === "暂无数据") {
        return false;
      }
    },
  },
  position: {
    type: Object as PropType<Position>,
    required: false,
    deault: {
      left: 0,
      top: 0,
      zIndex: 0,
    },
  },
  options: {
    type: Object as PropType<DataNumberOptionsType>,
    require: true,
    default: {
      animate: false,
      thousandsCharacter: false,
      direction: "horizontal",
      label: "待入馆",
      suffix: "人",
    },
  },
});
</script>

<style>
.data-number {
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: auto;
}

.number {
  font-size: 28px;
  font-weight: bold;
}
</style>
